<template>
  <div class="approveCount">
       <h4>交易列表 > 认证统计</h4>
       <div class="container">
           <div class="filter-box" style="padding: 30px;
                background: #fff;
                border: 1px solid #ddd;border-bottom:0;border-radius:5px 5px 0 0">
                    <div style="margin-bottom:14px;">
                            <div class="demo-input-suffix" style="margin-right:20px;display:inline-block;">
                                手机号：
                                <el-input clearable
                                    placeholder="请输入手机号"
                                    v-model="tel" class="filter-input"
                                    @keyup.enter.native="search()">
                                </el-input>
                            </div>
                             <div class="demo-input-suffix" style="margin-right:20px;display:inline-block;">
                                养殖基地：
                                <el-select clearable v-model="base" placeholder="请选择">
                                        <el-option
                                        v-for="item in baseList"
                                        
                                        :key="item.value"
                                        :label="item.baseName"
                                        :value="item.id">
                                        </el-option>
                                </el-select>
                            </div>
                            <div class="demo-input-suffix" style="margin-right:20px;display:inline-block;">
                                起止时间：
                                <el-date-picker
                                    v-model="time"
                                    type="datetimerange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期" 
                                    value-format="yyyy-MM-dd"
                                    style="width:350px;">
                                    </el-date-picker>
                            </div>
                            <el-button type="primary" @click="search()">搜索</el-button>
                    </div>           
             </div>
              <div class="approve_money" style="border-left:1px solid #ddd;border-right:1px solid #ddd;padding: 0  30px 30px;">
              <!-- 认证总额 -->
                 <span style="margin-right:20px;">认证总额 ：{{totalAuthFee}} </span>  
                 <span> 认证数量 ： {{totalAmount}}</span>
                
             </div>
             <el-table v-loading="loading" :data="data" border style="width: 100%;" ref="multipleTable" >
                 <el-table-column type="index"  width="80" label="编号" align="center"></el-table-column>
                 <el-table-column prop="realName" label="真实姓名" width="180" align="center"></el-table-column>
                  <el-table-column prop="supplyName" label="供货商名称" width="200" align="center"></el-table-column>
                <el-table-column prop="tel" label="供货商手机号" width="200" align="center"></el-table-column>
                 <el-table-column prop="belongBaseName" label="所属养殖基地" align="center" >
                </el-table-column>
                
                 <el-table-column prop="operateTime" label="认证时间" align="center">
                </el-table-column>
                  <el-table-column prop="authFee" label="认证费用" align="center" >
                </el-table-column>
            </el-table> 
            </div>
             <div class="pagination" style="padding:20px 30px 10px 20px;border-top:1px solid #ddd;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="getPageNum"
                    :page-sizes="[10, 20, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
           
  </div>
</template>

<script>
import { approveC,farmer_base } from '@/request/api'
export default { 
  data(){
    return {
       loading:true,
       tel:'',
       time:'',
       data:[],
       pageNum:1,
       pageSize:10,
       total: 0,
       base:'',
       baseList:[],
       totalAmount:'', // 认证总额 
       totalAuthFee:'' // 认证数量

    }
  },
  created(){
     this.get_approveC();
     this.get_farmer_base();  // 获取 基地 信息
  },
  methods: {
      //获取序号   
      formatterIndex(){
         return  this.pageSize*(this.pageNum-1) + 1 + row;
      },
      //搜索
      search(){
        console.log(this.time);
        this.get_approveC();
      },
      //当前页
      getPageNum(e){
         this.pageNum = e;
         this.get_approveC();
      },
      //当前页的条数
      handleSizeChange(e){
        this.pageSize = e;
         this.get_approveC();
      },
      //获取认证统计的列表
      get_approveC(){
        approveC({
            tel:this.tel,
            belongBase:this.base,
            startAuthTime: (this.time && this.time[0]) || '',
            endAuthTime: (this.time && this.time[1]) || '',
            pageSize:this.pageSize,
            pageNum:this.pageNum
        }).then(res => {
             this.loading = false;
             this.total = res.total;
             this.data = res.rows.authFarmerList;
             this.totalAmount = res.rows.totalAmount;
             this.totalAuthFee = res.rows.totalAuthFee;  
        })
      },
      get_farmer_base(){
        farmer_base().then(res => {
             console.log(res);
             this.baseList = res.data;
        })
      }
  }
 }
</script>
<style  scoped>
.approveCount > h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}
.filter-input {
  width: 200px;
  display: inline-block;
}
</style>